<template>
  <div class="video-mask">
    <div class="videobox">
      <div class="video-true">
        <div class="video-l">
          <!-- <video style="width: 100%; height: 100%" ref="video" controls>
          </video> -->
          <video style="width: 100%; height: 100%" ref="video" controls loop autoplay src="@/assets/video/video.mp4"></video>
        </div>
        <div class="video-r">
          <div class="video-rt">
            <span>{{ videoPlayerInfo.name }}·实时视频</span>
            <!-- <span>{{ this.cityName }}</span> -->
          </div>
          <div class="video-rc">
            <div class="control" @mouseover="videoHover = 1" @mouseleave="videoHover = 0">
              <div>
                <div></div>
                <div @mouseover="directionHover.top = true" @mouseleave="directionHover.top = false" @mousedown="videoControlClick('UP')" @mouseup="cancelControl('UP')">
                  <img :src="directionHover.top == true ? require(`@/assets/video/top1.png`) : require(`@/assets/video/top.png`)" alt />
                </div>
                <div></div>
              </div>
              <div>
                <div @mouseover="directionHover.left = true" @mouseleave="directionHover.left = false" @mousedown="videoControlClick('LEFT')" @mouseup="cancelControl('LEFT')">
                  <img :src="directionHover.left == true ? require(`@/assets/video/left1.png`) : require(`@/assets/video/left.png`)" alt />
                </div>
                <div>
                  <img :src="directionHover.center == true ? require(`@/assets/video/center1.png`) : require(`@/assets/video/center.png`)" alt />
                </div>
                <div @mouseover="directionHover.right = true" @mouseleave="directionHover.right = false" @mousedown="videoControlClick('RIGHT')" @mouseup="cancelControl('RIGHT')">
                  <img :src="directionHover.right == true ? require(`@/assets/video/right1.png`) : require(`@/assets/video/right.png`)" alt />
                </div>
              </div>
              <div>
                <div></div>
                <div @mouseover="directionHover.bottom = true" @mouseleave="directionHover.bottom = false" @mousedown="videoControlClick('DOWN')" @mouseup="cancelControl('DOWN')">
                  <img :src="directionHover.bottom == true ? require(`@/assets/video/bottom1.png`) : require(`@/assets/video/bottom.png`)" alt />
                </div>
                <div></div>
              </div>
              <div class="video-hover" v-show="videoHover == 1">
                <p>上下左右方向用于控制监控视角的调整，鼠标按下调整，抬起停止调整!该调整功能，根据网络情况，会有一定的延迟。</p>
              </div>
            </div>
          </div>
          <div class="video-rb">
            <button class="video-btn" @click="closeVideo">关闭视频</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
// import Hls from "hls.js";
import { mapState } from 'vuex'
export default {
  name: 'MapVideoBox',
  data() {
    return {
      videoHover: 0, // 控制video控制按钮的hover的效果
      videoName: '',
      hls: null,
      directionHover: {
        top: false,
        right: false,
        bottom: false,
        left: false,
        center: false
      }
    }
  },
  computed: {
    ...mapState(['videoPlayerInfo'])
  },
  watch: {
    videoPlayerInfo: {
      handler(newVal) {
        this.getVideoUrl(newVal.sn)
      },
      immediate: true
    }
  },
  methods: {
    getVideoUrl(sn) {
      // axios
      //   .post(
      //     "http://220.194.144.152:65020/hikvision/previewURLs?cameraIndexCode=" +
      //       sn,
      //     {},
      //     {
      //       headers: {
      //         "Content-Type": "application/json;charset=utf-8",
      //         Authorization: this.Authorization,
      //       },
      //     }
      //   )
      //   .then((res) => {
      //     console.log("previewURLs res =>", res);
      //     if (res.data.code == 200) {
      //       // 传入视频地址
      //       this.hlsVideoOpen(res.data.data);
      //     }
      //   });
    },
    videoControlClick(order) {
      // this.videoController(order, 0)
    },
    cancelControl(order) {
      // setTimeout(() => {
      //   this.videoController(order, 1)
      // }, 500)
    },
    videoController(order, action) {
      // axios
      //   .post(
      //     `http://220.194.144.152:65020/hikvision/controlling?command=${order}&cameraIndexCode=${this.videoPlayerInfo.sn}&action=${action}`,
      //     {},
      //     {
      //       headers: {
      //         "Content-Type": "application/json;charset=utf-8",
      //         Authorization: this.Authorization,
      //       },
      //     }
      //   )
      //   .then((res) => {
      //     console.log("controlling res =>", res);
      //   });
    },
    closeVideo() {
      if (this.hls) {
        this.hls.destroy()
        this.hls = null
      }
      this.$store.commit('setVideo', { show: false })
    },
    hlsVideoOpen(url) {
      // console.log("url-======", url);
      // const videoDom = this.$refs.video;
      // if (url && url.length > 0) {
      //   if (Hls.isSupported()) {
      //     this.hls = new Hls();
      //     this.hls.loadSource(url);
      //     this.hls.attachMedia(videoDom);
      //     this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
      //       console.log("加载成功！");
      //       videoDom.play();
      //     });
      //   } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      //     videoDom.src = url;
      //     videoDom.addEventListener("canplay", () => {
      //       video.play();
      //     });
      //   }
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.video-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  .videobox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;

    transform: translate(-50%, -50%);
    background-color: rgba(0, 1, 32, 0.6) !important;
    border: 2px dashed aquamarine;

    .video-true {
      width: 100%;
      height: 100%;
      display: flex;

      .video-l {
        width: 75%;
        height: 100%;
        padding-left: 15px;
      }

      .video-r {
        width: 25%;
        height: 100%;

        .video-rt {
          width: 100%;
          height: 25%;
          color: #fff;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          gap: 15px;

          & > span:nth-child(1) {
            font-size: 1.5rem;
            font-weight: bold;
          }

          & > span:nth-child(2) {
            font-size: 0.9rem;
          }
        }

        .video-rc {
          width: 100%;
          height: 50%;

          background-size: 90;
          display: flex;
          justify-content: center;
          align-items: center;

          .control {
            width: 200px;
            height: 200px;
            position: relative;
            background: url(@/assets/video/circle.png) no-repeat;

            & > div {
              width: 100%;
              height: 33.3%;
              display: flex;

              & > div {
                width: 33.3%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .video-hover {
              position: absolute;
              bottom: -38%;
              width: 200px;
              height: 70px;
              background-color: #fff;
              padding: 5px;
              font-size: 0.8rem;
              border-radius: 5px;
              color: #000f1e;
            }
          }
        }

        .video-rb {
          width: 100%;
          height: 25%;
          display: flex;
          align-items: center;
          justify-content: center;

          .video-btn {
            cursor: pointer;
            padding: 7px 30px;
            border-radius: 5px;
            border: none;
            font-family: 'YouSheBiaoTiHei';
            font-size: 1.2rem;
          }
        }
      }
    }

    .video-false {
      width: 100%;
      height: 100%;
      display: flex;
      gap: 100px;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      color: #fff;
      font-weight: bold;

      // font-family:  'YouSheBiaoTiHei';
      .video-btn {
        padding: 7px 30px;
        border-radius: 5px;
        border: none;
        font-family: 'YouSheBiaoTiHei';
        font-size: 1.2rem;
      }
    }
  }
}
</style>
